import React, { Component } from 'react';
import { StyleSheet, Image, TouchableOpacity, Alert, } from 'react-native';
import { Container, Content, View, Toast, Text, Icon } from 'native-base';
import LinearGradient from 'react-native-linear-gradient';
import { connect } from 'react-redux';

import { Header, Loading } from '../../component';
import { Colors, Metrics } from '../../theme';
import Config from '../../config/index';
import Http from '../../utils/HttpPost';
import AsyncStorage from '../../utils/AsyncStorage';

class Setting extends Component {
	constructor(props){
		super(props)
		this.state = {}
	}

	UNSAFE_componentWillReceiveProps (nextProps) {
		
	}

	//  路由地址
	toNavigateFunc(uri){
		this.props.navigation.navigate(uri)
	}

	/**
	 * 退出登录
	 */
	loginOutFunc() {
		this.props.logout();
		AsyncStorage.setItem("globalInfo", "" ).then((res)=>{
			this.props.navigation.navigate('Login'); 
			// 	Http('post','/user/logout',{
			//   	}).then(res => {
			// 	Alert.alert(
			// 		'提示',
			// 		'退出成功！',
			// 		[
			// 		{text: '确定', onPress: () => {
			// 			_this.props.navigation.goBack()
			// 		}},
			// 		],
			// 		{ cancelable: false }
			// 	)
			//   })
		})
	}

	render() {
		return(
			<Container> 
				<Header title="设置" onLeftPress={() => this.props.navigation.goBack()} />
				<View style={Styles.container}>
					<View>
						<TouchableOpacity style={Styles.back} onPress={() => this.toNavigateFunc('ChangePassword')}>
							<View style={Styles.cardStyle}>
								<Text style={Styles.labelTxt}>修改登录密码</Text>
								<Icon type="FontAwesome" name="angle-right" style={Styles.rightIcons} />
							</View>
						</TouchableOpacity> 
						<TouchableOpacity style={Styles.back} onPress={() => this.toNavigateFunc('ProblemBack')}>
							<View style={Styles.cardStyle}>
								<Text style={Styles.labelTxt}>反馈与建议</Text>
								<Icon type="FontAwesome" name="angle-right" style={Styles.rightIcons} />      
							</View>
						</TouchableOpacity>
						<TouchableOpacity style={Styles.back} onPress={() => this.toNavigateFunc('isMe')}>
							<View style={Styles.cardStyle}>
								<Text style={Styles.labelTxt}>版本</Text>
								<Text style={{ color: '#aab9ca',fontSize:16}}>{`${Config.Env === 'dev' ? Config.Env : ''} ${Config.Version.version}`}</Text>
							</View>
						</TouchableOpacity>
					</View>

					<View style={{marginBottom: 18}}> 
						<View style={Styles.signOutView}>
							<TouchableOpacity onPress={() => this.loginOutFunc()} >
								<LinearGradient style={[Styles.loginBtn]} colors={[Colors.subjectJbZuo, Colors.subject]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
									<Text style={{ fontSize: 12, padding: 12, color: Colors.bai }}>退出登录</Text>
								</LinearGradient>
							</TouchableOpacity>
						</View>
						<View style={Styles.textCongh}>
							<Text style={{ color: "#8E8DF2", fontSize: 12, textDecorationLine: 'underline' }} onPress={() => this.toNavigateFunc('ServiceAgreement')}>服务协议 </Text>
							<Text style={{ color: "#8E8DF2", fontSize: 12 }}> | </Text>
							<Text style={{  color: "#8E8DF2", fontSize: 12, textDecorationLine: 'underline' }} onPress={() => this.toNavigateFunc('PrivacyPolicy')}> 隐私政策</Text>
						</View>
						<Text style={{  color: "#8E8DF2", fontSize: 12,  textAlign: 'center', marginTop: 10 }}>聚火 Copyright 2020.All Right Reserved.</Text>
					</View>
				</View>
			</Container>
			)
	}
}

const mapStateToProps = state => ({
	logged: state.user.logged,
	userId: state.user.id, 
});

const mapDispatchToProps = dispatch => ({
	logout: () => dispatch({ type: 'LOGOUT' }),
});

export default connect(mapStateToProps, mapDispatchToProps)(Setting);

const Styles = StyleSheet.create({
	container: { flex: 1, backgroundColor: '#EFEDFA', flexDirection: 'column',  justifyContent: 'space-between' },
	back: { backgroundColor: 'white', },
	cardStyle: {
		height: 50,
		marginLeft: 15,
		paddingRight: 10,
		flexDirection: "row",
		justifyContent: "space-between",
		alignItems: "center",
		borderBottomWidth: StyleSheet.hairlineWidth,
		borderColor: Colors.C7,
	},
	leftIcons: {color: '#aab9ca',fontSize:20},
	labelTxt: { color: "#666666", fontSize: 14 },
	rightIcons: {color: '#aab9ca',fontSize:20},
	signOutView: { marginTop: 30, justifyContent: 'center', alignItems: "center" },
	textCongh: { flexDirection: "row", marginTop: 18,justifyContent: "center",alignItems: "center",},
	loginBtn: { width: Metrics.screenWidth * 0.6, alignItems: "center", borderRadius: 8 },
});



